<template>
  <div class="user-links">
    <!-- 将 router 设置为 true 表示为 el-menu 启用 vue router 支持-->
    <el-menu :router="true">
      <!-- 为 index 绑定 的 路由路径 使用动态生成的  -->
      <el-menu-item :index="`/user/${userId}/profile`">
        个人设置
      </el-menu-item>
      <el-menu-item :index="'/user/' + userId +'/change'">
        修改密码
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
    name: 'UserLinksView',
    data(){
      return {
        userId: ''
      }
    },
    created(){
      console.log( 'created: ' , this.$route.params );
      // 将通过路由路径传递的参数赋值给 userId 属性
      this.userId = this.$route.params.id ;
    },
    updated(){
      console.log( 'updated: ' , this.$route.params );
      // 将通过路由路径传递的参数赋值给 userId 属性
      this.userId = this.$route.params.id ;
    }
}
</script>

<style>
.user-links {
  margin: 20px;
}
</style>